<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>也许有用 技术论坛 - MAYBE IT WORKS</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="apple-touch-icon-precomposed" th:href="@{/show/images/icon/icon.png}">
    <link rel="shortcut icon" th:href="@{/show/images/icon/favicon.ico}">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" th:href="@{/chat/css/reset.min.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <link rel="stylesheet" th:href="@{/chat/css/style.css}">
	<style>
		.content{
            height: 480px;
			padding: 5px;
			display: block;
			overFlow-y: scroll;
			overFlow-x: hidden ;
		}
		.content::-webkit-scrollbar {
			/*width: 30px;*/
			 border-radius: 4px; height: 480px;
			 overflow-y: scroll;
		}
		.content1{
			height: 480px;
			display: block;
			overFlow-y: scroll;
			overFlow-x: hidden ;
		}
		.content1::-webkit-scrollbar {

			 /*border-radius: 4px;
			 overflow-y: scroll;*/
		}
        .preview img{
            width: 25px;
            height: 25px;
        }
        /*搜索提示中图片*/
        .contentDiv{
            /*  display:inline-block; */
            float: left;
            margin:5px 5px;
            width:45px;
            height:45px;
            border-radius:100px;
            -webkit-border-radius:100px;
            -moz-border-radius:100px;
            border:2px solid #fff;
            box-shadow:0 0 4px #ccc;
            overflow:hidden;
        }
        /*图片的样式*/
        .contentDiv img{
            width:100%;
            min-height:100%;
        }
        /*搜索*/
        .leftQueryDiv{
            right: -10px;
            top: 75px;
            width: 310px;height: 522px;
            position: absolute;
            z-index: 10;
            background-color: #fff;
            -webkit-box-shadow:2px 2px 10px #909090;
            overFlow-y: scroll;
            overFlow-x: hidden ;
        }
        .leftQuery {
            font-size: 24px;
            font-weight: bold;
            height: 30px;
            line-height: 50px;
        }
        .leftQuery li{
            height: 55px;
        }
	</style>
</head>
<body>
    <div class="wrapper">
        <div class="container">
            <div class="left">
                <div class="top" style="position: relative;z-index: 5;">
                    <input type="text" id="searchContent" placeholder="搜索" />
                    <a  id="search" href="javascript:;" class="search"></a>
                    <div class="leftQueryDiv">
                        <ul id="leftQueryJS" class="leftQuery" style="list-style-type: none;">
                            <li th:each="follow2:${chatList}">
                                <img class="contentDiv"  th:src="@{/upload/userimg/}+${follow2.getAvatar()}" alt="" />
                                <span th:text="${follow2.getUserAccount()}">大力水手</span>
                            </li>
                          <!--  <li >
                                <img class="contentDiv"  src="/chat/imgs/thomas.jpg" alt="" />
                                <span th:text="${follow2.getUserAccount()}">Mr.wang</span>
                            </li>-->
                        </ul>
                    </div>
                </div>
				<div class="content1">
                <ul id="leftFollow" class="people" >
                    <li class="person" th:data-chat="${'person'+index.index}" th:each="follow,index:${chatList}" >
                        <input class="fid" type="hidden" th:value="${follow.getFid()}"/>
                        <img th:src="@{/upload/userimg/}+${follow.getAvatar()}" alt="" />
                        <span class="name" th:text="${follow.getUserAccount()}">大力水手</span>
                        <span class="time" th:text="${#dates.format(follow.getTime(),'HH:mm')}">2:09 PM</span><span style="text-align: right" th:if="${follow.getLook()=='0'}" class="layui-badge-dot look"></span>
                        <span class="preview" th:utext="${follow.getPreview()}">我想知道...</span>
                    </li>
                </ul>
				</div>
            </div>
            <div class="right">
                <div class="top"><span>To: <span class="name">未选择好友</span></span></div>
                    <div class="chat" id="rightChat" th:data-chat="${'person'+index.index}" th:each="follow1,index:${chatList}">
                        <div class="content">
                            <input type="hidden" class="addChat" th:value="${follow1.getFid()}" />
                            <div th:each="chat,index1:${follow1.getChats()}">
                                <div class="conversation-start" th:if="${follow1.getChats()!=null && follow1.getChats().size()gt 1}">
                                        <div th:if="${index1.index!=0}">
                                            <span th:if="${#dates.format(chat.getCreateTime(), 'yyyy-MM-dd') gt #dates.format(follow1.getChats().get((index1.index)-1).getCreateTime(), 'yyyy-MM-dd')}" th:text="${#dates.format(follow1.getChats().get((index1.index)-1).getCreateTime(), 'yyyy-MM-dd HH:mm:ss')}">昨天, 4:20 PM</span>
                                            <span th:if="${#dates.format(chat.getCreateTime(), 'yyyy-MM-dd') == #dates.format(follow1.getChats().get((index1.index)-1).getCreateTime(), 'yyyy-MM-dd') && #dates.format(chat.getCreateTime(), 'HH:mm') gt #dates.format(follow1.getChats().get((index1.index)-1).getCreateTime(), 'HH:mm')}" th:text="${#dates.format(follow1.getChats().get((index1.index)-1).getCreateTime(), 'HH:mm:ss')}">昨天, 4:20 PM</span>
                                        </div>
                                </div>
                                <div th:if="${chat.getUid()!=id}" th:utext="${chat.getContent()}" class="bubble you">
                                    简直是糟糕的一天...
                                </div>
                                <div th:if="${chat.getUid()==id}" th:utext="${chat.getContent()}" class="bubble me">
                                    ... 什么？.
                                </div>
                                <div class="conversation-start" th:if="${follow1.getChats()!=null && follow1.getChats().size()== 1}">
                                        <div th:if="${index1.index==0}">
                                            <span th:if="${#dates.format(new java.util.Date().getTime(), 'yyyy-MM-dd') gt #dates.format(chat.getCreateTime(), 'yyyy-MM-dd')}" th:text="${#dates.format(chat.getCreateTime(), 'yyyy-MM-dd HH:mm:ss')}">昨天, 4:20 PM</span>
                                        </div>
                                </div>
                            </div>
                        </div>
                    </div>
                <div class="write">
                    <a href="javascript:;" class="write-link attach"></a>
                    <input id="content"  type="text" />
                    <a id="emoji" href="javascript:;" style="width: 440px" class="write-link smiley"></a>
                    <a id="send" href="javascript:;" class="write-link send"></a>
                </div>
            </div>
        </div>
    </div>
</body>
<script th:src="@{/chat/js/index.js}"></script>
<script th:src="@{/js/jquery-2.1.0.js}"></script>
<!--<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>-->
<script th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/chat/js/emoji_jQuery.min.js}"></script>
<script th:inline="javascript">
   /* $(function () {
        setInterval(function () {
            location.reload()//注意后面DIV的ID前面的空格，很重要！没有空格的话，会出双眼皮！（也可以使用类名）
        }, 8000);//8秒自动刷新
    });*/
 $(function () {
     var uid=[[${uid}]];
     if (uid!=null){
         var flag=true;
         $('.addChat').each(function(i,n){
             if ($(n).val()==uid){
                 document.querySelector('.chat[data-chat=person'+i+']').classList.add('active-chat');
                 document.querySelector('.person[data-chat=person'+i+']').classList.add('active');
                 flag=false;
             }
         });
         if (flag){
             document.querySelector('.chat[data-chat=person0]').classList.add('active-chat');
             document.querySelector('.person[data-chat=person0]').classList.add('active');
         }
     }
 });
 var cid=null;
 $(".person").click(function () {
        $('.active-chat .content').animate({scrollTop: '100000px'}, 500);
        cid = $(this).children("input").val();
        $(this).children(".look").hide();
        $.ajax({
            type:'post',
            url:'/Chat/read/'+cid,
            dataType: "text",
            async: false,
            success:function (data) {
               /* alert(data)*/
            }
        });
    });
 $("#send").click(function () {
        var content=$("#content").val();
        content = $.emojiParse({
            content: content,
            emojis: [
                {type: 'qq', path: '/chat/emoji/images/qq/', code: ':'},
                {path: '/chat/emoji/images/tieba/', code: ';', type: 'tieba'},
                {path: '/chat/emoji/images/emoji/', code: ',', type: 'emoji'}]
        });
        if (cid==null){
            alert("请选择好友");
        }else if(content==""){
            alert("内容不能为空")
        }else {
            $.ajax({
                type:'post',
                url:'/Chat/send',
                data:{"content":content,"cid":cid,"look":0},
                dataType: "text",
                async: false,
                success:function (data) {
                }
            });
            var add = $(".addChat").val();
            $('.addChat').each(function(i,n){
                if ($(n).val()==cid){
                    console.log($(n).val());
                    var word='<div class="bubble me">'+content+'</div>';
                    $(n).parent().append(word);
                    $(" #content").val("");
                }
            });
            $('.active-chat .content').animate({scrollTop: '100000px'}, 500);
        }
    });
 $("body").keypress(function(e){
       if(e.ctrlKey && e.witch ==13 || e.which == 10){
         /*  alert("你按的是ctrl+回车");*/
           $("#content").val($("#content").val()+"<br/>")
       }else if(e.shiftKey && e.which==13 || e.which == 10){
           // alert("你按的是shift+回车");
       }else if(e.which == 13){
           // alert("你按的是回车");
           $('#send').click();
       };
   });
 /*设置表情*/
 $.Lemoji({
       emojiInput: '#content',
       emojiBtn: '#emoji',
       position: 'LEFTTOP',
       length: 8,
       emojis: {
           qq: {path: '/chat/emoji/images/qq/', code: ':', name: 'QQ表情'},
           tieba: {path: '/chat/emoji/images/tieba', code: ';', name: "贴吧表情"},
           emoji: {path: '/chat/emoji/images/emoji', code: ',', name: 'Emoji表情'}
       }
   });
/*搜索好友*/
/*    $("#search").click(function () {
       var word = $("#searchContent").val();

       //获取所有好友列表
       $('.fid').each(function(i,n){

           //获取好友列表中好友的姓名
           var children = $(n).parent().children(".name").text();
           if (children==word){
               console.log($(n).val());
           }
           console.log("-->"+children);
       });
   });*/
   $("#search").click(function () {
       var word = $("#searchContent").val();

       //获取所有好友列表
       $('.fid').each(function(i,n){

           //获取好友列表中好友的姓名
           var children = $(n).parent().children(".name").text();
           if (children==word){
               //输出id
               /*console.log($(n).val());
               $("#searchContent").val("");
               $("#leftQueryJS li").hide();
               $(".leftQueryDiv").hide();
               $('.active-chat').removeClass("active-chat");
               $('.active').removeClass("active");
               document.querySelector('.chat[data-chat=person'+i+']').classList.add('active-chat');
               document.querySelector('.person[data-chat=person'+i+']').classList.add('active');
               $('.active-chat .content').animate({scrollTop: '100000px'}, 500);*/
               window.location.href="/Chat/toChat/"+$(n).val();
           }
           //输出名
           console.log(console.log($(n).val())+"-->"+children+"--->"+i);
       });
   });
   /*搜索中提示部分选中效果 以及点击事件*/
   $("#leftQueryJS li").mouseover(function () {
       $(this).css("background-color","#00b0ff").css("cursor","pointer")
   }).mouseout(function () {
       $(this).css("background-color","#ffffff")
   }).click(function(){
       /*console.log($(this).children("span").text())*/
       $("#searchContent").val($(this).children("span").text())
   });
   /*搜索模糊查询*/
   $("#leftQueryJS li").hide();
   $(".leftQueryDiv").hide();
   var $sub2 = $("#searchContent");
   $sub2.on("input", function () {
       $(".leftQueryDiv").show();
       var $iptVal2 = $sub2.val();
       if($iptVal2!=""){
           $("#leftQueryJS li").hide();
           $("#leftQueryJS li span").filter(":contains('" + $iptVal2 + "')").parents("li").show();
       }else{
           $("#leftQueryJS li").hide();
           $(".leftQueryDiv").hide();
       }
   });
</script>
</html>
